<template>
  <div class="home-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <div class="logo-icon">
        <i class="fas fa-paw"></i>
      </div>
      <div class="search-bar">
        <i class="fas fa-search search-icon" @click="handleSearch"></i>
        <input type="text" class="search-input" v-model="searchQuery" @input="debounceSearch" placeholder="搜索商店、宠物、商品或视频">
        <!-- 搜索结果弹出框 -->
        <div class="search-popup" v-if="showSearchPopup && (hasSearchResults || hasSearched)">
          <div class="search-popup-header">
            <span>搜索结果</span>
            <i class="fas fa-times" @click="closeSearchPopup"></i>
          </div>
          
          <!-- 有搜索结果时显示 -->
          <div class="search-popup-content" v-if="hasSearchResults">
            <!-- 商品结果 -->
            <div v-if="searchResults.products && searchResults.products.length" class="result-category">
              <div class="result-category-title">商品 ({{ searchResults.products.length }})</div>
              <div v-for="product in searchResults.products" :key="'p-'+product.productId" 
                   class="search-result-item" @click="navigateToProduct(product.productId)">
                <div class="result-image">
                  <img :src="product.mainImage || getRandomDefaultImage()" :alt="product.name">
                </div>
                <div class="result-info">
                  <div class="result-name">{{ product.name }}</div>
                  <div class="result-stats">
                    <span class="result-price">¥{{ product.price }}</span>
                    <span class="result-stat-item"><i class="fas fa-shopping-cart"></i> {{ product.sales || 0 }}</span>
                    <span class="result-stat-item"><i class="fas fa-comment"></i> {{ product.reviewCount || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 商店结果 -->
            <div v-if="searchResults.stores && searchResults.stores.length" class="result-category">
              <div class="result-category-title">商店 ({{ searchResults.stores.length }})</div>
              <div v-for="store in searchResults.stores" :key="'s-'+store.storeId" 
                   class="search-result-item" @click="navigateToStore(store.storeId)">
                <div class="result-image">
                  <img :src="store.coverImage || getRandomDefaultImage()" :alt="store.name">
                </div>
                <div class="result-info">
                  <div class="result-name">{{ store.name }}</div>
                  <div class="result-stats">
                    <span class="result-stat-item"><i class="fas fa-fire"></i> 人气 {{ store.popularity || 0 }}</span>
                    <span class="result-stat-item"><i class="fas fa-star"></i> {{ store.rating || 0 }} ({{ store.reviewCount || 0 }})</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 视频结果 -->
            <div v-if="searchResults.videos && searchResults.videos.length" class="result-category">
              <div class="result-category-title">视频 ({{ searchResults.videos.length }})</div>
              <div v-for="video in searchResults.videos" :key="'v-'+video.videoId" 
                   class="search-result-item" @click="navigateToVideo(video.videoId)">
                <div class="result-image">
                  <img :src="video.coverImage || getRandomDefaultImage()" :alt="video.title">
                </div>
                <div class="result-info">
                  <div class="result-name">{{ video.title }}</div>
                  <div class="result-stats">
                    <span class="result-stat-item"><i class="fas fa-eye"></i> {{ formatNumber(video.views || 0) }}</span>
                    <span class="result-stat-item"><i class="fas fa-thumbs-up"></i> {{ formatNumber(video.likes || 0) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 无搜索结果时显示 -->
          <div class="no-results" v-if="!hasSearchResults && hasSearched">
            <div class="no-results-icon">
              <i class="fas fa-search"></i>
            </div>
            <p class="no-results-main">没有找到与"{{ searchQuery }}"相关的结果</p>
          </div>
          
        </div>
      </div>
      <div class="notification-icon">
        <i class="fas fa-bell"></i>
      </div>
    </div>

    <!-- 顶部横幅 -->
    <div class="home-banner carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/image/home/1.png" alt="宠物商店促销">
        </div>
        <div class="carousel-item">
          <img src="/image/home/2.png" alt="可爱宠物">
        </div>
        <div class="carousel-item">
          <img src="/image/home/3.png" alt="宠物用品">
        </div>
        <div class="carousel-item">
          <img src="/image/home/4.png" alt="宠物服务">
        </div>
      </div>
      <div class="carousel-indicators">
        <span class="indicator active" data-index="0"></span>
        <span class="indicator" data-index="1"></span>
        <span class="indicator" data-index="2"></span>
        <span class="indicator" data-index="3"></span>
      </div>
      <button class="carousel-control carousel-control-prev">
        <i class="fas fa-chevron-left"></i>
      </button>
      <button class="carousel-control carousel-control-next">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

    <!-- 分类导航 -->
    <div class="category-header">
      <h2>热门分类</h2>
    </div>
    <div class="category-nav">
      <div class="category-item" @click="navigateToCategory(1)">
        <div class="icon-circle">
          <i class="fas fa-dog"></i>
        </div>
        <span>狗狗</span>
      </div>
      <div class="category-item" @click="navigateToCategory(2)">
        <div class="icon-circle">
          <i class="fas fa-cat"></i>
        </div>
        <span>猫咪</span>
      </div>
      <div class="category-item" @click="navigateToCategory(3)">
        <div class="icon-circle">
          <i class="fas fa-fish"></i>
        </div>
        <span>水族</span>
      </div>
      <div class="category-item" @click="navigateToCategory(4)">
        <div class="icon-circle">
          <i class="fas fa-drumstick-bite"></i>
        </div>
        <span>宠物食品</span>
      </div>
      <div class="category-item" @click="navigateToCategory(5)">
        <div class="icon-circle">
          <i class="fas fa-shopping-bag"></i>
        </div>
        <span>宠物用品</span>
      </div>
      <div class="category-item" @click="navigateToCategory(6)">
        <div class="icon-circle">
          <i class="fas fa-medkit"></i>
        </div>
        <span>医疗保健</span>
      </div>
    </div>

    <!-- 推荐商店 -->
    <section class="section">
      <div class="section-header">
        <h2>附近宠物店</h2>
        <a href="javascript:void(0)" @click="$router.push('/store/nearby')" class="view-all">查看地图 ></a>
      </div>

      <div v-if="storesLoading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>正在加载商店...</p>
      </div>

      <div v-else class="store-list">
        <router-link v-for="store in stores" :key="store.storeId"
          :to="{ name: 'StoreDetail', params: { id: store.storeId } }" class="store-card">
          <img class="store-image" :src="store.coverImage || getRandomDefaultImage()" :alt="store.name">
          <div class="store-info">
            <div class="store-name">{{ store.name }}</div>
            <div class="store-address">{{ store.address }}</div>
            <div v-if="store.distance !== null && store.distance !== undefined" class="store-distance">距离 {{
              formatDistance(store.distance) }}</div>
          </div>
        </router-link>
      </div>
    </section>

    <!-- 热门产品 -->
    <section class="section">
      <div class="section-header">
        <h2>热门产品</h2>
        <a href="javascript:void(0)" @click="$router.push('/products')" class="view-all">查看更多 ></a>
      </div>

      <div class="product-list">
        <div v-for="product in products" :key="product.productId" class="product-card"
          @click="navigateToProduct(product.productId)">
          <div class="product-img">
            <img :src="product.mainImage" :alt="product.name">
          </div>
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <div class="product-meta">
              <p class="price">¥{{ product.price }}</p>
              <div class="product-sales">
                已售 {{ product.salesCount || product.sales || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选视频 -->
    <section class="section">
      <div class="section-header">
        <h2>精选视频</h2>
        <router-link to="/video" class="view-all">查看更多 ></router-link>
      </div>

      <div class="video-list">
        <div v-for="video in videos" :key="video.videoId" class="video-card"
          @click="$router.push({ name: 'videoPlayer', params: { id: video.videoId } })">
          <div class="video-thumbnail">
            <img :src="video.coverImage" :alt="video.title">
            <div class="video-play-icon">
              <i class="fas fa-play"></i>
            </div>
          </div>
          <div class="video-info">
            <div class="video-title">{{ video.title }}</div>
            <div class="video-views">{{ video.views }} 次观看</div>
          </div>
        </div>

        <template v-if="!videos || videos.length === 0">
          <div class="video-card">
            <div class="video-thumbnail">
              <img
                src="https://images.unsplash.com/photo-1577175889968-f551f5978161?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
                alt="猫咪护理">
              <div class="video-play-icon">
                <i class="fas fa-play"></i>
              </div>
            </div>
            <div class="video-info">
              <div class="video-title">猫咪护理必备知识</div>
              <div class="video-views">0.9万次观看</div>
            </div>
          </div>

          <div class="video-card">
            <div class="video-thumbnail">
              <img
                src="https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
                alt="宠物健康">
              <div class="video-play-icon">
                <i class="fas fa-play"></i>
              </div>
            </div>
            <div class="video-info">
              <div class="video-title">宠物健康饮食指南</div>
              <div class="video-views">0.8万次观看</div>
            </div>
          </div>
        </template>
      </div>
    </section>

    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue';
import api from '@/network/api';
import { showDialog, showToast } from 'vant';

export default {
  name: 'HomeView',
  components: {
    TabBar
  },
  data() {
    return {
      searchQuery: '', 
      searchResults: {
        products: [],
        stores: [],
        videos: []
      },
      hasSearched: false,
      showSearchPopup: false,
      searchTimeout: null,
      products: [], // 商品数据
      loading: false, 
      stores: [],
      storesLoading: false,
      videos: [],
      getRandomDefaultImage: () => {
        const imageNumber = Math.floor(Math.random() * 4) + 1;
        return `/image/store_cover/${imageNumber}.png`;
      }
    }
  },
  computed: {
    hasSearchResults() {
      return this.searchResults &&
        ((this.searchResults.products && this.searchResults.products.length > 0) ||
        (this.searchResults.stores && this.searchResults.stores.length > 0) || 
        (this.searchResults.videos && this.searchResults.videos.length > 0));
    }
  },
  methods: {
    // 防抖搜索
    debounceSearch() {
      if (this.searchTimeout) {
        clearTimeout(this.searchTimeout);
      }
      
      if (!this.searchQuery || this.searchQuery.trim() === '') {
        this.showSearchPopup = false;
        return;
      }
      
      this.searchTimeout = setTimeout(() => {
        this.handleSearch();
      }, 500); // 500毫秒延迟
    },
    
    // 处理搜索
    async handleSearch() {
      if (!this.searchQuery || this.searchQuery.trim() === '') {
        return;
      }
      
      try {
        this.hasSearched = true;
        
        const response = await api.searchByKeyword(this.searchQuery);
        
        if (response.data && response.data.code === 100) {
          // 更新搜索结果数据结构，适应后端返回的格式
          this.searchResults = {
            products: response.data.data.products || [],
            stores: response.data.data.stores || [],
            videos: response.data.data.videos || []
          };
          this.showSearchPopup = true;
        } else {
          console.error('搜索失败:', response.data);
          showToast('搜索失败');
          this.resetSearchResults();
          this.showSearchPopup = true;
        }
      } catch (error) {
        console.error('搜索错误:', error);
        showToast('搜索请求出错');
        this.resetSearchResults();
        this.showSearchPopup = true;
      }
    },
    
    // 重置搜索结果
    resetSearchResults() {
      this.searchResults = {
        products: [],
        stores: [],
        videos: []
      };
    },
    
    // 获取搜索结果总数
    getTotalResultsCount() {
      let count = 0;
      if (this.searchResults.products) count += this.searchResults.products.length;
      if (this.searchResults.stores) count += this.searchResults.stores.length;
      if (this.searchResults.videos) count += this.searchResults.videos.length;
      return count;
    },
    
    // 关闭搜索弹出框
    closeSearchPopup() {
      this.showSearchPopup = false;
    },
    
    // 导航到商品详情
    navigateToProduct(productId) {
      this.showSearchPopup = false;
      this.$router.push(`/product/${productId}`);
    },
    
    // 导航到商店详情
    navigateToStore(storeId) {
      this.showSearchPopup = false;
      this.$router.push({ name: 'StoreDetail', params: { id: storeId } });
    },
    
    // 导航到视频详情
    navigateToVideo(videoId) {
      this.showSearchPopup = false;
      this.$router.push({ name: 'videoPlayer', params: { id: videoId } });
    },
    
    // 导航到商品分类页面
    navigateToCategory(categoryId) {
      // 在localStorage中保存选中的分类ID，以便在商品列表页面使用
      localStorage.setItem('selectedCategory', categoryId.toString());
      // 导航到商品列表页面
      this.$router.push('/products');
    },

    // 获取商品列表数据
    async fetchProducts() {
      this.loading = true;
      try {
        const response = await api.getOrderBySales(0);
        if (response.data && response.data.code === 100) {
          // 只取前4个商品用于展示
          this.products = response.data.data.slice(0, 4);
        } else {
          console.error('获取商品失败:', response.data);
        }
      } catch (error) {
        console.error('获取商品失败:', error);
      } finally {
        this.loading = false;
      }
    },

    // 获取商店列表数据
    async fetchStores() {
      this.storesLoading = true;
      try {
        let storesData = [];
        try {
          // Promise wrapper for geolocation
          const getPosition = () => new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 10000, enableHighAccuracy: true });
          });

          const position = await getPosition();
          const { latitude, longitude } = position.coords;
          const params = {}
          params.tagId = 0;
          const response = await api.getNearbyStores(latitude, longitude, 5, params);

          if (response.data && response.data.data) {
            storesData = response.data.data || [];
            storesData.forEach(store => {
              if ((store.distance === null || store.distance === undefined) && store.latitude && store.longitude) {
                store.distance = this.calculateDistance(latitude, longitude, store.latitude, store.longitude);
              }
            });
          } else {
            throw new Error('获取附近商店失败，将尝试获取所有商店');
          }
        } catch (error) {
          console.warn('无法获取附近商店，将尝试获取所有商店:', error.message);
          showDialog({
            title: '提示',
            message: '无法获取附近商店，将尝试获取所有商店',
          });
          const response = await api.getStores(0);
          if (response.data && response.data.data) {
            storesData = response.data.data || [];
            storesData.forEach(store => { store.distance = null; });
          }
        }
        this.stores = storesData.slice(0, 3);
      } catch (error) {
        console.error('获取商店失败:', error);
        this.stores = [];
      } finally {
        this.storesLoading = false;
      }
    },

    async fetchVideos() {
      try {
        const response = await api.getVideos({
          category: 1, // 精选视频，可以根据需要调整分类
          query: ''
        })
        if (response.data && response.data.data) {
          this.videos = response.data.data.slice(0, 3);
        }
      } catch (error) {
        console.error('获取视频列表失败:', error);
      }
    },

    // 计算两点之间的距离（使用Haversine公式）
    calculateDistance(lat1, lon1, lat2, lon2) {
      const R = 6371; // 地球半径，单位为公里
      const dLat = (lat2 - lat1) * Math.PI / 180;
      const dLon = (lon2 - lon1) * Math.PI / 180;
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return R * c;
    },

    // 格式化距离显示
    formatDistance(distance) {
      if (distance === null || distance === undefined) return '';
      if (distance < 1) {
        return `${(distance * 1000).toFixed(0)}m`;
      }
      return `${distance.toFixed(1)}km`;
    },

    // 添加格式化数字的方法
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k';
      }
      return num;
    }
  },
  created() {
    // 在组件创建时获取商品数据
    this.fetchProducts();
    this.fetchStores();
    this.fetchVideos();
  },
  mounted() {

    // 轮播图功能
    const carousel = document.querySelector('.carousel');
    const items = carousel.querySelectorAll('.carousel-item');
    const indicators = carousel.querySelectorAll('.indicator');
    const prevBtn = carousel.querySelector('.carousel-control-prev');
    const nextBtn = carousel.querySelector('.carousel-control-next');
    let currentIndex = 0;
    let interval;

    // 切换到指定幻灯片
    const showSlide = (index) => {
      // 取消当前激活状态
      items.forEach(item => item.classList.remove('active'));
      indicators.forEach(indicator => indicator.classList.remove('active'));

      // 激活新的幻灯片
      currentIndex = (index + items.length) % items.length;
      items[currentIndex].classList.add('active');
      indicators[currentIndex].classList.add('active');
    };

    // 下一张幻灯片
    const nextSlide = () => {
      showSlide(currentIndex + 1);
    };

    // 上一张幻灯片
    const prevSlide = () => {
      showSlide(currentIndex - 1);
    };

    // 设置自动轮播
    const startAutoSlide = () => {
      interval = setInterval(nextSlide, 3000);
    };

    // 停止自动轮播
    const stopAutoSlide = () => {
      clearInterval(interval);
    };

    // 绑定指示器点击事件
    indicators.forEach((indicator, index) => {
      indicator.addEventListener('click', () => {
        showSlide(index);
        stopAutoSlide();
        startAutoSlide();
      });
    });

    // 绑定前进后退按钮
    prevBtn.addEventListener('click', () => {
      prevSlide();
      stopAutoSlide();
      startAutoSlide();
    });

    nextBtn.addEventListener('click', () => {
      nextSlide();
      stopAutoSlide();
      startAutoSlide();
    });

    // 鼠标悬停时暂停轮播
    carousel.addEventListener('mouseenter', stopAutoSlide);
    carousel.addEventListener('mouseleave', startAutoSlide);

    // 开始自动轮播
    startAutoSlide();
  }
}
</script>

<style scoped>
.home-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 70px;
  /* 为底部导航栏留出空间 */
}

.home-banner {
  height: 400px;
  background: linear-gradient(135deg, #3490dc, #6574cd);
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 轮播图样式 */
.carousel {
  position: relative;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  z-index: 2;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 3;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: white;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
}

.carousel-control-prev {
  left: 20px;
}

.carousel-control-next {
  right: 20px;
}

.banner-content {
  padding: 40px;
  color: white;
  max-width: 600px;
}

.banner-content h1 {
  font-size: 42px;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
}

.primary-btn {
  background-color: white;
  color: #3490dc;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.category-header {
  margin-bottom: 20px;
}

.category-header h2 {
  font-size: 24px;
  color: #2d3748;
}

.category-nav {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  gap: 5px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  width: 12%;
  background-color: transparent;
  cursor: pointer;
  margin: 0 2px;
}

.category-item:first-child {
  margin-left: 0;
}

.category-item:last-child {
  margin-right: 0;
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #3490dc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.category-item i {
  font-size: 30px;
  color: white;
}

.section {
  margin: 40px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #2d3748;
}

.view-all {
  color: #3490dc;
  text-decoration: none;
  font-weight: 500;
}

.store-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.product-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.store-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.store-card {
  min-width: 20vh;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.store-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.store-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.store-info {
  padding: 12px;
}

.store-name {
  font-size: 16px;
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 5px;
}

.store-address {
  font-size: 12px;
  color: #718096;
  margin-bottom: 5px;
}

.store-distance {
  font-size: 12px;
  color: #a0aec0;
}

.price {
  color: #e53e3e;
  font-weight: bold;
  margin-bottom: 12px;
}

.product-card {
  min-width: 180px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.product-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin: 0 0 8px;
  color: #2d3748;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 42px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #e53e3e;
  font-weight: bold;
  margin-bottom: 0;
}

.product-sales {
  font-size: 12px;
  color: #718096;
  display: flex;
  align-items: center;
}

.product-sales i {
  margin-right: 4px;
  font-size: 12px;
}

.video-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.video-card {
  min-width: 240px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 140px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 14px;
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 5px;
}

.video-views {
  font-size: 12px;
  color: #718096;
}

@media (max-width: 768px) {

  .store-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-nav {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .category-item {
    min-width: 100px;
    margin-right: 10px;
  }
}

@media (max-width: 480px) {

  .store-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .home-banner {
    height: 300px;
  }

  .banner-content h1 {
    font-size: 32px;
  }
}

/* 搜索栏样式 */
.search-container {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
}

.logo-icon {
  font-size: 24px;
  color: #3490dc;
  margin-right: 15px;
}

.notification-icon {
  font-size: 20px;
  color: #718096;
  margin-left: 15px;
  cursor: pointer;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 20px;
  padding: 8px 15px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  position: relative; /* 添加相对定位，作为弹出框的参考点 */
}

.search-icon {
  color: #94a3b8;
  margin-right: 8px;
}

.search-input {
  border: none;
  background-color: transparent;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #718096;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3490dc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 搜索弹出框样式 */
.search-popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 8px;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f8fafc;
}

/* 滚动条样式（Webkit浏览器） */
.search-popup::-webkit-scrollbar {
  width: 6px;
}

.search-popup::-webkit-scrollbar-track {
  background: #f8fafc;
}

.search-popup::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
  border-radius: 6px;
}

.search-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.search-popup-header span {
  font-weight: 500;
  color: #1e293b;
}

.search-popup-header i {
  cursor: pointer;
  color: #64748b;
  font-size: 16px;
}

.search-popup-content {
  padding: 8px 0;
}

.search-popup-footer {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid #e2e8f0;
  color: #3490dc;
  font-weight: 500;
  cursor: pointer;
}

/* 搜索结果项样式 */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f1f5f9;
}

.search-result-item:hover {
  background-color: #f1f5f9;
}

.result-image {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 12px;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-info {
  flex: 1;
}

.result-name {
  font-weight: 500;
  color: #1e293b;
}

/* 搜索结果分类标题 */
.result-category {
  margin-bottom: 10px;
}

.result-category-title {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  padding: 8px 16px;
  background-color: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 无结果样式 */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: #64748b;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.no-results-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.no-results-icon i {
  font-size: 32px;
  color: #94a3b8;
}

.no-results-main {
  font-size: 16px;
  color: #334155;
  margin: 0;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .no-results-icon {
    width: 60px;
    height: 60px;
  }
  
  .no-results-icon i {
    font-size: 28px;
  }
}

/* 添加结果统计信息样式 */
.result-stats {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.result-stat-item {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.result-stat-item i {
  margin-right: 4px;
  font-size: 11px;
}

.result-price {
  color: #e53e3e;
  font-weight: 500;
  margin-right: 12px;
}
</style>